<!--
  THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&lang=js
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
	<head>
		<meta charset="utf-8">
	</head>
	<body style="height: 100%; margin: 0">
		<div id="container" style="height: 100%"></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

		<script type="text/javascript">
			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			var app = {};

			var option;

			option = {
				dataset: {
					source: [
						['score', 'amount', 'product'],
						[89.3, 58212, 'Matcha Latte'],
						[57.1, 78254, 'Milk Tea'],
						[74.4, 41032, 'Cheese Cocoa'],
						[50.1, 12755, 'Cheese Brownie'],
						[89.7, 20145, 'Matcha Cocoa'],
						[68.1, 79146, 'Tea'],
						[19.6, 91852, 'Orange Juice'],
						[10.6, 101852, 'Lemon Juice'],
						[32.7, 20112, 'Walnut Brownie']
					]
				},
				grid: {
					containLabel: true
				},
				xAxis: {
					name: 'amount'
				},
				yAxis: {
					type: 'category'
				},
				visualMap: {
					orient: 'horizontal',
					left: 'center',
					min: 10,
					max: 100,
					text: ['High Score', 'Low Score'],
					// Map the score column to color
					dimension: 0,
					inRange: {
						color: ['#65B581', '#FFCE34', '#FD665F']
					}
				},
				series: [{
					type: 'bar',
					encode: {
						// Map the "amount" column to X axis.
						x: 'amount',
						// Map the "product" column to Y axis
						y: 'product'
					}
				}]
			};

			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}

			window.addEventListener('resize', myChart.resize);
		</script>
	</body>
</html>
